// Environment css and colors.

// Purpose is to show a distinctive marker so that user knows in which
// environment they are working.

// DTAP statuses:
// development, test, acceptance, production, education, or backup

$env-production:    #0fa2db;        // Zotonic blue
$env-development:   #2e6d32;        // Dark green
$env-test:          #4527a0;        // Deep purple
$env-acceptance:    #e65100;        // Orange
$env-education:     #006064;        // Cyan
$env-backup:        #37474f;        // Gray

.environment-development,
.environment-test,
.environment-acceptance,
.environment-education,
.environment-backup {

    body {
        padding-left: 24px;

        @media (min-width: $screen-phone) {
            &::before {
                position: fixed;
                top: 0;
                left: 0;
                bottom: 0;
                width: 24px;
                font-size: 14px;

                display: block;
                color: white;
                writing-mode: tb-rl;
                text-align: center;
            }
        }

        .navbar .nav .caret {
            border-top-color: white;
            border-bottom-color: white;
        }
    }
}

@mixin environment-colors($color, $name) {
    @media (min-width: $screen-phone) {
        body::before {
            background-color: $color;
            background-image: linear-gradient($color, white);
            content: $name;
        }
    }

    &.zotonic-admin {
        .navbar.navbar-branded {
            background-color: $color;

            .navbar-collapse {
                background-color: $color;
            }

            .nav {
                > li > a {
                    &:hover,
                    &:focus {
                        background-color: darken($color, 10%);
                    }
                }
            }

            .navbar-nav {
                > .open > a,
                > .active > a {
                    background-color: darken($color, 10%);
                }
            }

            @media (max-width: $screen-tablet) {
                .dropdown-menu > li > a {
                    color: white;
                }
            }

            .dropdown-menu > li.active > a,
            .dropdown-menu > li.active > a:hover,
            .dropdown-menu > li > a:hover {
                background-color: darken($color, 10%);
            }
        }
    }
}


.environment-development {
    @include environment-colors($env-development, "development");
}

.environment-test {
    @include environment-colors($env-test, "test");
}

.environment-acceptance {
    @include environment-colors($env-acceptance, "acceptance");
}

.environment-education {
    @include environment-colors($env-education, "education");
}

.environment-backup {
    @include environment-colors($env-backup, "backup");
}
